<template>
  <div class="teaching-calendar">
    <div class="calendar-header">
      <h2>教学日历</h2>
      <el-radio-group v-model="view" size="small">
        <el-radio-button label="month">月</el-radio-button>
        <el-radio-button label="week">周</el-radio-button>
      </el-radio-group>
    </div>

    <div class="calendar-body">
      <compact-calendar :value="currentDate" :events="teachingEvents" @change="handleDateChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import CompactCalendar from './CompactCalendar.vue'

const props = defineProps({
  // 可以添加其他属性
})

const emit = defineEmits(['date-click', 'event-click'])

// 视图类型：月份或周
const view = ref('month')
const currentDate = ref(new Date())

// 示例教学事件（真实场景应该从API获取）
const teachingEvents = ref([
  {
    id: 1,
    title: '高一物理课',
    date: new Date(new Date().getFullYear(), new Date().getMonth(), 15),
    type: 'lesson',
  },
  {
    id: 2,
    title: '期中考试',
    date: new Date(new Date().getFullYear(), new Date().getMonth(), 20),
    type: 'exam',
  },
  {
    id: 3,
    title: '教研活动',
    date: new Date(), // 今天
    type: 'activity',
  },
])

// 处理日期变化
const handleDateChange = (date) => {
  currentDate.value = date
  emit('date-click', date)

  // 查找当天是否有事件
  const eventsForDay = teachingEvents.value.filter((event) => {
    const eventDate = new Date(event.date)
    return (
      eventDate.getDate() === date.getDate() &&
      eventDate.getMonth() === date.getMonth() &&
      eventDate.getFullYear() === date.getFullYear()
    )
  })

  if (eventsForDay.length > 0) {
    // 有事件的情况
    emit('event-click', eventsForDay)
  }
}

onMounted(() => {
  // 可以在这里加载教学事件数据
})
</script>

<style scoped>
.teaching-calendar {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
}

.calendar-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.calendar-body {
  padding: 0;
}
</style>
